<!--
 * @Author: 王灿
 * @Date: 2019-11-19 00:11:22
 * @LastEditTime : 2019-12-29 23:07:30
 * @Description: 配置新增
 * @FilePath: \scarlet-sparrow-admin\src\views\configure\ConfigureOperate.vue
 -->
<template>
  <div class="configure-operate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <!-- 配置名称 -->
      <el-form-item prop="propertyName">
        <el-row>
          <el-input v-model="ruleForm.propertyName" placeholder="请输入配置名称" clearable></el-input>
        </el-row>
      </el-form-item>
      <!-- 绑定商品 -->
      <el-form-item prop="productId" v-if="type === 10">
        <el-row>
          <el-select
            v-model="productId"
            filterable
            remote
            reserve-keyword
            clearable
            placeholder="请绑定商品"
            :remote-method="onGetCommodity"
          >
            <el-option
              v-for="item in productList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <!-- 配置内容 / 封面图 -->
      <el-form-item prop="propertyValue">
        <el-row>
          <el-input
            v-model="ruleForm.propertyValue"
            type="text"
            placeholder="请输入配置内容"
            clearable
            v-if="type !== 10"
          ></el-input>
          <jq-upload
            :upData="mainPicObj"
            :fileList="mainPic"
            @onChangeImageKey="onChangeImageKey"
            v-else
          />
        </el-row>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item prop="remark">
        <el-row>
          <el-input v-model="ruleForm.remark" type="text" placeholder="请输入备注" clearable></el-input>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { getPropertyAdd, getPropertyUpdate } from '@/api/configure.js'
import { getProductList, getDownUrl } from '@/api/commodity.js'
import JqUpload from '@/components/jq-upload/index.vue'
export default {
  name: 'ConfigureOperate',
  components: { JqUpload },
  props: {
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        propertyName: '',
        propertyValue: '',
        remark: '',
        type: ''
      },
      productId: '',
      homePic: '',
      rules: {
        propertyName: [
          { required: true, message: '请输入配置名称', trigger: 'blur' }
        ],
        propertyValue: [
          { required: true, message: '请输入配置内容', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      // 广告封面主图
      mainPicObj: {
        label: '广告封面主图',
        accept: 'image/png, image/gif, image/jpg, image/jpeg',
        limit: 1,
        type: 1,
        isImage: true
      },
      mainPic: [],
      productList: []
    }
  },
  watch: {
    row() {
      this.onGetRow()
      this.onGetCommodity('')
    }
  },
  created() {
    this.onGetRow()
    this.onGetCommodity('')
  },
  methods: {
    // 默认数据
    onGetRow() {
      let boolean = JSON.stringify(this.row) !== '{}'
      this.ruleForm.id = boolean ? this.row.id : ''
      this.ruleForm.propertyName = boolean ? this.row.propertyName : ''
      this.ruleForm.propertyValue = boolean ? this.row.propertyValue : ''
      this.ruleForm.remark = boolean ? this.row.remark : ''
      this.ruleForm.type = boolean ? this.row.type : this.type
      if (this.type === 10) {
        this.productId = boolean ? JSON.parse(this.row.propertyValue).productId : ''
        this.homePic = boolean ? JSON.parse(this.row.propertyValue).homePic : ''
        if (boolean) {
          // 下载封面图片
          getDownUrl({
            fileName: this.homePic
          }).then(res => {
            this.mainPic = Array.of({ name: this.homePic, url: res.data.url.split("?")[0] })
          })
        }
      }
    },
    // 获取所有商品
    onGetCommodity(query) {
      this.productList = []
      getProductList({
        name: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.name
          this.productList.push(params)
        })
      })
    },
    // 子组件传值
    onChangeImageKey(fileName, type, isDetele, url) {
      if (type === 1) {
        this.homePic = fileName
      }
    },
    // 提交
    onSubmitForm(formName) {
      if (this.type === 10) {
        if (this.productId !== '' && this.homePic !== '') {
          this.ruleForm.propertyValue = JSON.stringify({
            productId: this.productId,
            homePic: this.homePic
          })
        } else {
          let title
          if (this.productId === '') {
            title = '请选择商品'
          }
          if (this.homePic === '') {
            title = '请上传封面图片'
          }
          this.$message({
            type: 'error',
            message: title
          })
          return false
        }
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.row.id) {
            // 编辑
            getPropertyUpdate(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '编辑成功'
              })
              this.onRefresh()
            })
          } else {
            // 新增
            getPropertyAdd(this.ruleForm).then(res => {
              this.$notify.success({
                title: '提示',
                message: '创建成功'
              })
              this.onRefresh()
            })
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false, isRefresh: false }
      this.$emit('addTableRow', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('addTableRow', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.configure-operate {
  .el-select {
    width: 100%;
  }
}
</style>